<template>
    <div ref="container" id="map"></div>
</template>

<script lang="ts" setup>
import 'maptalks/dist/maptalks.css'
import * as maptalks from 'maptalks'
import * as THREE from 'three'
import { GroupGLLayer } from '@maptalks/gl';
import { ThreeLayer } from 'maptalks.three'
import { onMounted } from 'vue'
import { initStats } from '@/utils'
import jsonData from './demo.json'
let map: maptalks.Map
let groupLayer: any


const initMap = () => {
    map = new maptalks.Map('map', {
        center: [120.6531834, 31.3081501],
        zoom: 18,
        pitch: 60,
        zoomControl: true,
        layerSwitcherControl: {
            position: 'top-right',
            baseTitle: 'Base Layers',
            overlayTitle: 'Layers',
            excludeLayers: [],
            containerClass: 'maptalks-layer-switcher',
        },
        baseLayer: new maptalks.TileLayer('tile', {
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c', 'd'],
        }),
    })

    //光照设置
    // const lights = {
    //     // 环境光：提升基础亮度，照亮所有区域
    //     ambient: {
    //         color: [1, 1, 1], // 白色环境光（亮度最高，原[0.2,0.2,0.2]太暗）
    //         exposure: 30, // 提高曝光度（比原来的20更高，增强整体亮度）
    //         orientation: 0,
    //     },
    //     // 方向光：增强直射光强度，突出明暗对比
    //     directional: {
    //         direction: [1, 0, -1], // 光线方向（保持不变）
    //         color: [1, 1, 1], // 白色方向光
    //         intensity: 2.0, // 新增强度参数（默认可能较低，设为2倍增强）
    //     },
    // };
    // map.setLights(lights);

    new maptalks.control.Toolbar({
        position: { bottom: '40', right: '20' },
        items: [
            {
                item: 'reset',
                click: function () {
                    map.setPitch(0)
                    map.setBearing(0)
                },
            },
        ],
    }).addTo(map)

    // https://doc.maptalks.com/docs/api/gl/group-gl-layer/#sceneconfig%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E
    const sceneConfig: any = {
        environment: {
            enable: true,
            level: 2,
            brightness: 0,
        },
        // ground: {
        //   enable: true,
        //   renderPlugin: {
        //     type: 'fill',
        //   },
        //   symbol: {
        //     polygonFill: [0.2666667, 0.2666667, 0.2666667, 1],
        //     polygonOpacity: 1,
        //   },
        // },
        postProcess: {
            enable: true,
            antialias: {
                enable: true,
            },
            outline: {
                enable: true,
                outlineFactor: 0.3,
                highlightFactor: 0.2,
                outlineWidth: 1,
                outlineColor: [1, 1, 0],
            },
            bloom: {
                enable: false,
                threshold: 0.01,
                factor: 0.2,
                radius: 0.02,
            },
        },
    }
    groupLayer = new GroupGLLayer('group', [], { sceneConfig })
    groupLayer.addTo(map)

    initStats();

    initBuildingByGeometry()
    // initGeoJsonLayer()
    // initLineByGeometry()
    // initAreaByGeometry()
}

// 加载[建筑物]、路网、水域、绿化
// const initGeoJsonLayer = () => {
//     // https://doc.maptalks.com/docs/style/plugin-lit/
//     const geoStyle: any = {
//         style: [
//             {
//                 filter: ['in', 'building', 'yes', 'residential'], // 建筑
//                 renderPlugin: {
//                     dataConfig: {
//                         type: '3d-extrusion',
//                         altitudeProperty: 'height',
//                         minHeightProperty: 'min_height',
//                         altitudeScale: 1,
//                         defaultAltitude: 10,
//                         topThickness: 0,
//                         top: true,
//                         side: true,
//                     },
//                     sceneConfig: {
//                         // animation: 'swing',
//                         animation: null,
//                         animationDuration: 800,
//                     },
//                     type: 'lit',
//                 },
//                 symbol: {
//                     visible: false, // todo 是否显示
//                     bloom: false,
//                     ssr: false,
//                     // polygonOpacity: 1,
//                     // polygonFill: 'red',
//                     material: {
//                         // baseColorTexture: '/source/textures/waternormals.jpg',
//                         // baseColorTexture: null,
//                         baseColorFactor: [0.53, 0.73, 0.48, 1],
//                         hsv: [0, 0, 0],
//                         baseColorIntensity: 1,
//                         contrast: 1,
//                         outputSRGB: 1,
//                         metallicRoughnessTexture: null,
//                         roughnessFactor: 1,
//                         metallicFactor: 1,
//                         normalTexture: null,
//                         noiseTexture: null,
//                         uvScale: [1, 1],
//                         uvOffset: [0, 0],
//                         uvRotation: 0,
//                         uvOffsetAnim: [0, 0],
//                         normalMapFactor: 1,
//                         normalMapFlipY: 0,
//                         bumpTexture: null,
//                         bumpScale: 0.02,
//                         clearCoatThickness: 5,
//                         clearCoatFactor: 0,
//                         clearCoatIor: 1.4,
//                         clearCoatRoughnessFactor: 0.04,
//                         occlusionTexture: null,
//                         emissiveTexture: null,
//                         emissiveFactor: [0, 0, 0],
//                         emitColorFactor: 1,
//                         emitMultiplicative: 0,
//                     },
//                 },
//             },
//             {
//                 filter: ['all', ['==', 'oneway', 'yes'], ['has', 'name']], // 路网-有名称
//                 renderPlugin: {
//                     dataConfig: {
//                         type: 'line',
//                     },
//                     sceneConfig: {},
//                     type: 'line',
//                 },
//                 symbol: {
//                     lineBloom: false, // true:开启泛光 false:关闭泛光
//                     lineWidth: 8,
//                     lineColor: [0.73, 0.73, 0.73, 1],
//                     lineOpacity: 1,
//                 },
//             },
//             {
//                 filter: ['all', ['==', 'oneway', 'yes'], ['!has', 'name']], // 路网-无名称
//                 renderPlugin: {
//                     dataConfig: {
//                         type: 'line',
//                     },
//                     sceneConfig: {},
//                     type: 'line',
//                 },
//                 symbol: {
//                     lineBloom: false, // true:开启泛光 false:关闭泛光
//                     lineWidth: 8,
//                     lineColor: [0.73, 0.73, 0.73, 1],
//                     lineOpacity: 0.7,
//                 },
//             },
//             {
//                 filter: ['==', 'natural', 'water'], // 水域
//                 renderPlugin: {
//                     dataConfig: {
//                         type: 'fill',
//                     },
//                     sceneConfig: {},
//                     type: 'water',
//                 },
//                 symbol: {
//                     ssr: true,
//                     texWaveNormal: './source/textures/waternormals.jpg',
//                     texWavePerturbation: './source/textures/texWavePerturbation.png',
//                     waterBaseColor: [0.1451, 0.2588, 0.4863, 1],
//                     contrast: 1.425,
//                     hsv: [0, -0.596, 0],
//                     uvScale: 3,
//                     animation: true,
//                     waterSpeed: 1,
//                     waterDirection: 0,
//                 },
//             },
//             {
//                 filter: ['==', 'landuse', 'grass'], // 绿化
//                 renderPlugin: {
//                     dataConfig: {
//                         type: 'fill',
//                     },
//                     sceneConfig: {},
//                     type: 'fill',
//                 },
//                 symbol: {
//                     lineColor: 'rgb(43 178 94)',
//                     lineWidth: 2,
//                     polygonFill: 'rgb(43 178 94)',
//                     polygonOpacity: 0.8,
//                 },
//             },
//         ],
//     }
//     // https://doc.maptalks.com/docs/api/vt/geojson-vector-tile-layer/
//     const geoLayer = new GeoJSONVectorTileLayer('geoJsonLayer', {
//         data: jsonData,
//         style: geoStyle,
//         pickingGeometry: true,
//         hitDetect: false, // 是否开启图层绘制检测（动态鼠标样式），关闭可以提高性能
//     })

//     geoLayer.addTo(groupLayer)

//     geoLayer.on('dataload', (e: any) => {
//         map.fitExtent(e.extent)
//     })

//     map.on('click', (e: any) => {
//         let geos = geoLayer.identify(e.coordinate)
//         geoLayer.cancelOutline()

//         if (geos.length > 0) {
//             let feature = geos[0].data.feature
//             // const feature = geoLayer.getFeature(feature.id);
//             console.log(feature.id)
//             geoLayer.outline(0, [`${feature.id}`])
//         }
//     })
// }

// // 加载线（路网）
// const initLineByGeometry = () => {
//     const style = {
//         style: [
//             {
//                 symbol: {
//                     lineWidth: 8,
//                     lineBloom: false, // true:开启泛光 false:关闭泛光
//                     lineColor: 'red',
//                     lineOpacity: 1,
//                     lineStrokeColor: 'yellow',
//                     lineStrokeWidth: 0,
//                 },
//             },
//         ],
//     }
//     const list: any = []
//     const lineLayer = new LineStringLayer('lineLayer', { style })
//     //  模拟数据-拥堵路段
//     const features = jsonData.features.filter((i) => i.properties.ref == 'G1522')
//     features.forEach((json: any) => {
//         const line = maptalks.GeoJSON.toGeometry(json)
//         line.setInfoWindow({
//             title: 'Hello Maptalks',
//             dx: 3,
//             dy: 0,
//             //   content: this.$refs['infowindow_content']
//             content:
//                 '<div class="info-content"><video controls width="450" height="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video></div>',
//         })
//         list.push(line)
//     })
//     lineLayer.addGeometry(list).addTo(groupLayer)
//     //  lineLayer.bringToFront();

//     map.on('click', (e: any) => {
//         lineLayer.forEach((g: any) => {
//             g.updateSymbol({
//                 lineStrokeWidth: 0,
//             })
//         })
//         let geos = lineLayer.identify(e.coordinate)
//         geos.forEach((item: any) => {
//             item.updateSymbol({
//                 lineStrokeWidth: 2,
//             })
//             item.openInfoWindow()
//         })
//     })
// }

// // 加载面（电子围栏）
// const initAreaByGeometry = () => {
//     const style = {
//         style: [
//             {
//                 symbol: {
//                     lineColor: '#34495e',
//                     lineWidth: 2,
//                     polygonFill: 'rgb(135,196,240)',
//                     polygonOpacity: 0.75,
//                 },
//             },
//         ],
//     }
//     const list: any = []
//     const layer = new maptalks.PolygonLayer('polygonLayer', { style })

//     const features = [
//         {
//             type: 'Feature',
//             properties: {},
//             geometry: {
//                 type: 'Polygon',
//                 coordinates: [
//                     map.getCenter().add(0.002, 0),
//                     map.getCenter().add(0.002, 0.002),
//                     map.getCenter().sub(0.002, -0.002),
//                     map.getCenter().sub(0.002, 0),
//                 ],
//             },
//         },
//     ]
//     features.forEach((json: any) => {
//         const l = maptalks.GeoJSON.toGeometry(json)
//         list.push(l)
//     })
//     layer.addGeometry(list).addTo(groupLayer)

//     map.fitExtent(layer.getExtent())

//     map.on('click', (e: any) => {
//         layer.forEach((g: any) => {
//             g.updateSymbol({
//                 polygonFill: 'rgb(135,196,240)',
//             })
//         })
//         let geos = layer.identify(e.coordinate)
//         geos.forEach((item: any) => {
//             item.updateSymbol({
//                 polygonFill: 'red',
//             })
//         })
//     })
// }

// 通过threejs加载建筑物
const initBuildingByGeometry = () => {
    const threeLayer = new ThreeLayer('threeLayer', {
        forceRenderOnMoving: true,
        forceRenderOnRotating: true,
    });
    threeLayer.config('animation', true)
    threeLayer.addTo(groupLayer)

    threeLayer.prepareToDraw = function (gl: any, scene: any, camera: any) {
        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, -10, 10).normalize();
        scene.add(light);
        scene.add(new THREE.AmbientLight('#fff', 1));

        const meshList: any[] = [];
        let material = new THREE.MeshPhongMaterial({ color: 'rgba(135, 186, 122, 0.1)', transparent: true });
        let highlightMaterial = new THREE.MeshBasicMaterial({ color: 'yellow', transparent: true });
        jsonData.features.filter(i => ['yes', 'residential'].includes(i.properties.building)).forEach(function (g: any) {
            const h = Number(g.properties.height) || 10
            const geometry: any = maptalks.GeoJSON.toGeometry(g);
            const mesh: any = threeLayer.toExtrudePolygon(geometry, {
                height: h,
                topColor: '#fff',
                asynchronous: true,
                bloom: h > 100
            }, material);
            const eventList = ['click', 'mousemove', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'];
            eventList.forEach(function (eventType) {
                mesh.on(eventType, function (e: any) {
                    if (e.type === 'mouseout') {
                        mesh.setSymbol(material);
                    }
                    if (e.type === 'mouseover') {
                        mesh.setSymbol(highlightMaterial);
                    }
                });
            });
            meshList.push(mesh);

        })
        threeLayer.addMesh(meshList)
    }
}

onMounted(() => {
    initMap()
})
</script>
<style lang="less" scoped>
#map {
    height: 100vh;
    width: 100vw;
}
</style>